<template>
  <div>
    <!--页头-->
    <page-header></page-header>

    <el-row>
      <el-col :span="18">
        <!--店铺卡片详情-->
        <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="text">{{ restaurant.restaurantName }}</span>
            <i :class="iconClass" @click="handleCollection"></i>
          </div>

          <el-row>
            <el-col :span="4">
              <div>
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
              </div>
            </el-col>
            <el-col :span="20">
              <div class="bottom clearfix">
                <span class="el-textarea">{{ restaurant.description }}</span>

                <el-form :model="restaurant" status-icon label-width="100px" class="demo-ruleForm">
                  <el-form-item label="地址:" prop="address">
                    <span v-text="restaurant.address"></span>
                  </el-form-item>
                  <el-form-item label="餐盒费用:" prop="boxCost">
                    <span v-text="restaurant.boxCost"></span>
                  </el-form-item>
                  <el-form-item label="联系人:" prop="ownerName">
                    <span v-text="restaurant.ownerName"></span>
                  </el-form-item>
                  <el-form-item label="联系邮箱:" prop="email">
                    <span v-text="restaurant.email"></span>
                  </el-form-item>
                  <el-form-item label="联系电话:" prop="mobile">
                    <span v-text="restaurant.mobile"></span>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-divider></el-divider>
        <!--店铺菜品卡片列表: 循环-->
        <div v-for="food in foodList" :key="food.id">
          <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="hover">
            <el-row>
              <el-col :span="2">
                <!--菜品图片-->
                <div>
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="foodImage">
                </div>
              </el-col>
              <el-col :span="22"><div style="padding: 14px;">
                <span class="text">{{ food.title }}: </span>
                <div v-for="cate in cateList">
                  <el-tag v-if="food.cateId===cate.id">{{cate.name}}</el-tag>
                </div>
                <br/>
                <!--菜品描述-->
                <span class="text">{{ food.description }}</span>
                <br/>
                <span class="text">{{ food.price }}元</span>
                <span class="text sales">销量: {{ food.totalSales}}</span>
                <el-button type="primary" round @click="addToCart(food)">添加到包裹</el-button>
              </div></el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <!--购物车-->
        <el-row>
          <cart ref="cart" style="float: right" :cart-list="cartList" v-on:to-pay="showOrderForm" v-on:reset-cart="resetCartList"></cart><br/>
        </el-row>
        <!--评论-->
        <el-row>
          <div style="height: 500px">
            <el-scrollbar style="height: 100%">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>评价</span>
                </div>
                <div v-for="comment in comments" :key="comment.id">
                  <comment :comment="comment"></comment>
                </div>
              </el-card>
            </el-scrollbar>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <!--订单详情-->
    <order-form-dialog :dialog-visible="orderVisible" :food-list="orderList" :restaurant="restaurant" v-on:close-order="closeOrderForm" v-on:reset-cart="resetCartList">
    </order-form-dialog>

  </div>
</template>

<script>
  import pageHeader from '../../components/PageHeader';
  import cart from '../../components/Cart';
  import orderFormDialog from '../../components/OrderFormDialog';
  import RestaurantCard from "../../components/restaurant/RestaurantCard";
  import Comment from "../../components/restaurant/Comment";

  export default {
    components: {
      Comment,
      RestaurantCard,
      pageHeader,
      cart,
      orderFormDialog
    },
    props: {
      shopId: null,
    },
    data() {
      return{
        orderVisible: false,    //订单表单可见性
        iconClass: "el-icon-star-off",
        // 店铺详情
        restaurant:{},
        // 餐品列表
        foodList: [],
        // 类别列表
        cateList: [],
        // 购物车列表
        cartList: [],
        // 订单餐品列表
        orderList: [],
        totalPrice: Number,
        //需要从服务端获取
        comments: [],
      }
    },
    // 初始化
    created() {
      console.log("restId: " + this.shopId);
      // 初始化
      this.$axios({
        method: "get",
        url: "/rest/init",
        params: {
          id: this.shopId
        }
      })
        .then(response => {
          if (response.data.success) {
            this.restaurant=response.data.restaurant;
            this.foodList=response.data.food_list;
            this.cateList=response.data.cate_list;
            this.comments=response.data.rest_comments_list;
          }
          const collection = this.$store.getters.collection;
          collection.forEach((item, index) => {
            if ( item.id===this.restaurant.id ) {
              this.iconClass="el-icon-star-on";
            }
          });
          console.log(response.data.message);
        })
        .catch(error => console.log(error));
      // 是否已收藏
      // const collection = this.$store.getters.collection;
      // collection.forEach((item, index) => {
      //   if ( item.id===this.restaurant.id ) {
      //     this.iconClass="el-icon-star-on";
      //   }
      // })
      // 获取店铺详情
      // this.$axios({
      //   method: "get",
      //   url: "/rest/info",
      //   params: {
      //     id: this.shopId
      //   }
      // })
      //   .then(response => {
      //     if (response.data.success) {
      //       this.restaurant=response.data.restaurant;
      //       // console.log(response.data.restaurant);
      //     }
      //     console.log(response.data.message);
      //   })
      //   .catch(error => console.log(error));
      // 获取餐品列表
      // this.$axios({
      //   method: "get",
      //   url: "/food/list",
      //   params: {
      //     rid: this.shopId
      //   }
      // })
      //   .then(response => {
      //     if (response.data.success) {
      //       this.foodList=response.data.food_list;
      //     }
      //     console.log(response.data.message);
      //   })
      //   .catch(error => console.log(error));
      // 获取餐品类别列表
      // this.$axios({
      //   method: "get",
      //   url: "/cate/list",
      //   params: {
      //     rid: this.shopId
      //   }
      // })
      //   .then(response => {
      //     if (response.data.success) {
      //       this.cateList=response.data.cate_list;
      //       // console.log(response.data.cate_list);
      //     }
      //     console.log(response.data.message);
      //   })
      //   .catch(error => console.log(error));
      // 获取店铺评论
      // this.$axios({
      //   method: "get",
      //   url: "/rest/comments",
      //   params: {
      //     rid: this.shopId
      //   }
      // })
      //   .then(response => {
      //     if (response.data.success) {
      //       this.comments=response.data.rest_comments_list;
      //       // console.log(response.data.cate_list);
      //     }
      //     console.log(response.data.message);
      //   })
      //   .catch(error => console.log(error));
    },
    methods: {
      //关闭弹框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //添加到包裹
      addToCart: function (food) {
        console.log("addToCart");
        var flag = false;
        //操纵子组件的data
        for (var item of this.cartList) {
          if (item.id === food.id) {
            console.log(this.cartList.indexOf(item));
            // this.cartList[this.cartList.indexOf(item)]={id: item.id, title: item.title, count: item.count+1, price: item.price};
            flag = true;
          }
        }
        if (!flag) {
          this.cartList.push({id: food.id, title: food.title, count: 1, price: food.price});
        }
        console.log("afterAdd");
      },
      //显示订单
      showOrderForm: function (enlargeAmount) {
        this.orderVisible=true;
        this.orderList=enlargeAmount;   //传入所选餐品
        console.log("showOrderForm");
      },
      //关闭订单表单
      closeOrderForm: function () {
        this.orderVisible=false;
        this.resetCartList();
        console.log("closeOrderForm");
      },
      //重置购物包裹
      resetCartList() {
        this.cartList=[];
      },
      // 收藏店铺
      handleCollection: function () {
        if (this.iconClass === "el-icon-star-off") {
          // 收藏
          this.$axios({
            method: "post",
            url: "/user/subscribe",
            data: {
              userId: this.$store.getters.uid,
              restaurantId: this.restaurant.id
            }
          })
            .then(response => {
              if (response.data.success) {
                this.iconClass="el-icon-star-on";
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
        } else if (this.iconClass === "el-icon-star-on") {
          // 取消收藏
          this.$confirm("确认取消收藏本店铺?")
            .then(() => {
                this.$axios({
                  method: "post",
                  url: "/user/cancelsub",
                  data: {
                    userId: this.$store.getters.uid,
                    restaurantId: this.restaurant.id
                  }
                })
                  .then(response => {
                    if (response.data.success) {
                      this.iconClass="el-icon-star-off";
                    }
                    console.log(response.data.message);
                  })
                  .catch(error => console.log(error))
            })

        }
      }
    }
  }
</script>

<style scoped>
  .image {
    width: 150px;
    display: block;
  }
  .foodImage {
    width: 100px;
    display: block;
  }
  .sales {
    color: #fff153;
  }
</style>
